<template>
  <view class="content">
	<uni-notice-bar scrollable single text="本期奖金池: 10000"></uni-notice-bar>
	<uni-section title="中奖通知" sub-title="" type="line">
		<uni-row class="card-row" :gutter="5">
			<uni-col v-for="item of mainAwardTaskList" :key="item.id" :span="12">
				<image style="width: 100%;" :src="item.taskImg[0]" mode="widthFix" @click="onTaskAwardClick(item.id)"></image>
				<view class="card-title">{{ item.taskName }}</view>
			</uni-col>
		</uni-row>
		<template v-slot:right>
			<view class="sub-title" @click="onMoreMainTask(0)">查看更多</view>
		</template>
	  </uni-section>
	<uni-section title="奖品展示" sub-title="" type="line">
		<uni-row class="card-row" :gutter="5">
			<uni-col v-for="item of prizeList" :key="item.id" :span="12">
				<image style="width: 100%;" :src="item.prizeImg[0]" mode="widthFix" @click="onPrizeClick(item.id)"></image>
				<view class="card-title">{{ item.prizeName }}</view>
			</uni-col>
		</uni-row>
		<template v-slot:right>
			<view class="sub-title" @click="onMorePrize">查看更多</view>
		</template>
	</uni-section>
  </view>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { CODE_KEY, OPEN_ID_KEY, SESSION_KEY, USER_INFO } from '../../utils/constant.js'
import { useUserStore } from '../../stores/user.js'
import { login } from '../../api/auth.js'
import { fetchMainlineActiveList, fetchMainlineAwardList, fetchPrizeList } from '../../api/adventure.js'

const userStore = useUserStore()
const cover = ref('https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg')
const loginReady = ref(false)
const prizeList = ref([])
const mainTaskList = ref([])
const mainAwardTaskList = ref([]) 

const onMorePrize = () => {
	uni.navigateTo({
		url: '/pages/home/prizeList'
	})
}

const onPrizeClick = (id) => {
	uni.navigateTo({
		url: `/pages/home/prizeDetail?id=${id}`
	})
}

const onMoreMainTask = (type) => {
	uni.navigateTo({
		url: `/pages/home/mainTaskList?type=${type}`
	})
}

const onTaskAwardClick = (id) => {
	uni.navigateTo({
		url: `/pages/home/winPrizeDetail?id=${id}`
	})
}

onMounted(async() => {
	const { success, data } = await fetchPrizeList({
		pageNum: 1,
		pageSize: 4
	})
	if (success) {
		prizeList.value = data.slice(0, 4).map(item => {
			return {
				...item,
				prizeImg: item.prizeImg.split(';')
			}
		})
	}
	let taskRes = await fetchMainlineAwardList({
		pageNum: 1,
		pageSize: 4
	})
	if (taskRes.success) {
		mainAwardTaskList.value = taskRes.data.slice(0, 4).map(item => {
			return {
				...item,
				taskImg: item.taskImg.split(';')
			}
		})
	}
})
</script>

<style scoped lang="scss">
.card-title {
	text-align: center;
}
.sub-title {
	font-size: 12px;
	color: #999;
}
</style>
